<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>滚动条逻辑</title>
    <style>
        .box {
            background: lemonchiffon;
            width: 500px;
            height: 300px;
            overflow: auto;

            
        }

        .inner {
            width: 100px;
            height: 1000px;
            background: hotpink;
            border-radius: 10px;
        }
        
    </style>
</head>

<body>

    <div id="d1" class="box box1">
        <div id="d2" class="inner">1</div>
    </div>


</body>

</html>

<script>
    d1.onscroll = show;

    function show(){
        console.log('d1.clientHeight', d1.clientHeight)
        console.log('d1.scrollHeight：', d1.scrollHeight)


        //元素内部有滚动条时，滚动条距离顶部的距离，可以修改此值
        console.log('d1.scrollTop：', d1.scrollTop)
    }
</script>